<template>
  <div class="deptTree">
      <el-input v-model="state.key" placeholder="请输入" 
      @change="handleFilter"
      clearable >
          <template #prefix>
          <el-icon class="el-input__icon"><search  /></el-icon>
        </template>
      </el-input>
        <el-tree
    ref="treeRef"
    class="filter-tree"
     node-key="id"
    :data="state.deptOptions"
    :props="defaultProps"
      :expand-on-click-node="false"
    default-expand-all
      @node-click="handleNodeClick"
    :filter-node-method="filterNode"
  />
  </div>
</template>

<script setup lang="ts">
import { ElTree } from 'element-plus';
import {ref,reactive,defineEmits, onMounted } from 'vue';
import {
    deptTreeSelect
} from '/@ts/axios/urlApi/system/user';

const emit = defineEmits(['updateDept'])
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const defaultProps = {
  children: 'children',
  label: 'label',
}
const treeRef = ref<InstanceType<typeof ElTree>>()
const handleFilter = () =>{
 treeRef.value?.filter(state.key)
}
const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.label.includes(value)
}
 const state = reactive({
    key:"",
    title:"",
    deptOptions:[],
    userVisible:false
 })
 const createFormData = () => ({
  nickName: '',
  deptId: "",
  phonenumber:"",
  email:"",
  userName:"",
  password:"",
  sex:"",
  status:"0",
  postIds:"",
  roleIds:"",
  remark:""
})
 const formUser = reactive(createFormData())
 const getDeptTree = () =>{
 deptTreeSelect().then((response:any) => {
        state.deptOptions = response.data;
      });
 }
const handleNodeClick = (data:any) =>{
emit('updateDept',data)
}
//添加用户
const handleAddUser = () =>{
state.title ='添加用户'
state.userVisible = true
 Object.assign(formUser,createFormData())
}
onMounted(()=>{
    getDeptTree()
  
})
</script>

<style  scoped lang="scss" >
.deptTree{
  width: 250px;
  height: 100%;
}
</style>
